<template>
  <div class="cashOrder">
    <!-- ========修改弹窗======-->
    <!--、、财务订单：审核定金/全款（定金4/全款11）-->
    <div>
      <el-dialog
        :title="+updateMsg.code === 4 ? '定金待审核' : '全款待审核'"
        width="45%"
        class="fns-el-dialog"
        :close-on-click-modal="false"
        :visible.sync="+updateMsg.code === 4 || +updateMsg.code === 11"
        :before-close="handleClose">
        <!--// body-->
        <div :span="24">
          <el-form ref="formData1" :model="formData1" :rules="rules" label-width="135px" style="margin-left:6px;">
            <el-row>
              <el-col :span="11">
                <el-form-item label="订单编号：">
                  <el-input v-model="form1.orderCode "  disabled></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="11" :offset="1">
                <el-form-item label="经手销售：" >
                  <el-input v-model="form1.saleName " disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="11">
                <el-form-item label="经纪人：">
                  <el-input v-model="form1.brokerName" placeholder="" disabled></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="11" :offset="1" class="itemNum">
                <el-form-item label="订单总价（万元）：" >
                  <el-input v-model="form1.totalOrderPrice" placeholder="" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="11">
                <el-form-item label="定金金额：" >
                  <el-input v-model="form1.commodityDepositAmount" placeholder="" disabled></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="11" :offset="1" >
                <el-form-item label="保证金（万元）：" class="itemNum">
                  <el-input v-model="form1.commodityGuaranteeAmount" placeholder="" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="24" class="itemNum">
                <el-col :span="5"> 保证金及定金回执 </el-col>
                <el-col :span="18" style="margin-left: -20px;">
                  <div v-for="item in form1.commodityDepositOrFullImageList">
                    <a :href=" imgUrl + item.url " target="_blank"> {{ item.url }} </a>
                  </div>
                </el-col>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="11" class="itemNum" >
                <el-form-item label="保证金及定金确认情况：" prop="confirmType">
                  <el-radio-group v-model="formData1.confirmType">
                    <el-radio :label="1">已到账</el-radio>
                    <el-radio :label="0">未到账</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>

              <el-col :span="11"  :offset="1" v-if="+formData1.confirmType === 0">
                <el-form-item label="详情：" prop="confirmDetails">
                  <el-input type="textarea" :maxlength="length.max100" v-model="formData1.confirmDetails" placeholder="请输入详情"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

          </el-form>
        </div>

        <!--// 底部-->
        <span slot="footer" class="dialog-footer">
          <el-button @click="updateMsg.code = -1">取 消</el-button>
          <el-button type="primary" @click="submitForm">提交</el-button>
        </span>
      </el-dialog>
    </div>

    <!--、、财务订单：审核尾款(尾款待审核)-->
    <div>
      <el-dialog
        title="尾款待审核"
        width="45%"
        class="fns-el-dialog"
        :close-on-click-modal="false"
        :visible.sync="+updateMsg.code === 7"
        :before-close="handleClose">
        <!--// body-->
        <div :span="24">
          <el-form ref="formData2" :model="formData2" :rules="rules" label-width="110px" style="margin-left:6px;">

            <el-row>
              <el-col :span="11">
                <el-form-item label="订单编号：">
                  <el-input v-model="form2.orderCode " placeholder="" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11" :offset="1">
                <el-form-item label="经手销售：">
                  <el-input v-model="form2.saleName" placeholder="" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="11">
                <el-form-item label="经纪人：">
                  <el-input v-model="form2.brokerName" placeholder="" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11" :offset="1" class="itemNum">
                <el-form-item label="订单全款（万元）：" >
                  <el-input v-model="form2.totalOrderPrice" placeholder="" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="11">
                <el-form-item label="保证金（万元）：" class="itemNum">
                  <el-input v-model="form2.commodityGuaranteeAmount" placeholder="" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11" class="itemNum" :offset="1">
                <el-form-item label=" 保证金及定金确认情况：" >
                  <el-input v-model="+form2.payInFull === 1 ? '已到账' : '未到账'" placeholder="" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="11">
                <el-form-item label="定金金额：">
                  <el-input v-model="form2.commodityDepositAmount" placeholder="" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11" :offset="1">
                <el-form-item label="确认人：">
                  <el-input v-model="form2.allPaymentUser" placeholder="" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="11" styly="line-height: 20px;">
                <el-col :span="7" style="text-align: right;">保证金及定金回执：</el-col>
                <el-col :span="17" style="padding-left: 10px;">
                  <div v-for="item in form2.commodityDepositOrFullImageList">
                    <a :href=" imgUrl + item " target="_blank"> {{ item }} </a>
                  </div>
                </el-col>
              </el-col>
              <el-col :span="11" :offset="1">
                <el-form-item label="确认时间：">
                  <el-input v-model="form2.allPaymentDate" placeholder="" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="24" style="border-top: 1px solid #dbdbdb;margin: 20px 0;">
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="11">
                <el-form-item label="尾款金额（万元）：" class="itemNum">
                  <el-input v-model="form2.balanceOrderPrice" placeholder="" :maxlength="length.max10" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11" :offset="1">
                <el-form-item label="尾款确认情况：" prop="balancePaymentConfirm" class="itemNum">
                  <el-radio-group v-model="formData2.balancePaymentConfirm">
                    <el-radio :label="1">已到账</el-radio>
                    <el-radio :label="0">未到账</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="11" class="itemNum" styly="line-height: 18px;">
                <el-col :span="7" style="text-align: right;">尾款回执：</el-col>
                <el-col :span="17" style="padding-left: 10px;">
                  <div v-for="item in form2.endReceipt">
                    <a :href=" imgUrl + item " target="_blank"> {{ item }} </a>
                  </div>
                </el-col>
              </el-col>
              <el-col :span="11"  :offset="1" v-if="+formData2.balancePaymentConfirm === 0">
                <el-form-item label="详情：" prop="detail">
                  <el-input type="textarea" :maxlength="length.max100" v-model="formData2.detail" placeholder="请输入详情"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

          </el-form>
        </div>

        <!--// 底部-->
        <span slot="footer" class="dialog-footer">
          <el-button @click="updateMsg.code = -1">取 消</el-button>
          <el-button type="primary" @click="submitForm">提 交</el-button>
        </span>
      </el-dialog>
    </div>

    <!--、、财务订单：归还保证金-->
    <div>
      <el-dialog
        title="归还保证金"
        width="45%"
        class="fns-el-dialog"
        :close-on-click-modal="false"
        :visible.sync="updateMsg.code === 21 && +updateMsg.saleType === 1"
        :before-close="handleClose">
        <!--// body-->
        <div :span="24">
          <el-form ref="formData3" :model="formData3" :rules="rules" label-width="110px" style="margin-left:6px;">

            <el-row>
              <el-col :span="11">
                <el-form-item label="订单编号：" >
                  <el-input v-model="form3.orderCode" placeholder="" disabled></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="11" :offset="1">
                <el-form-item label="经手销售：" >
                  <el-input v-model="form3.saleName" placeholder="" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="11" >
                <el-form-item label="经纪人：" >
                  <el-input v-model="form3.brokerName" placeholder="" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11" :offset="1">
                <el-form-item label="可退还日期：" >
                  <el-input v-model="form3.guaranteeAmountReturnTime" placeholder="" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>

             <el-row>
               <el-col :span="11">
                 <el-form-item label="保证金：" >
                   <el-input v-model="form3.commodityGuaranteeAmount" placeholder="" disabled></el-input>
                 </el-form-item>
               </el-col>
             </el-row>

             <el-row>
               <el-col :span="23" class="itemNum" style="margin-bottom: 30px">
                 <el-form-item label="保证金转账回执：" >
                   <el-upload
                     class="upload-demo"
                     action="/amdms/api/file/upload/"
                     :headers="{token: tokenImg}"
                     :on-preview="handlePreview"
                     :on-remove="handleRemove"
                     :file-list="fileList"
                     :before-upload="beforeUpload"
                     :on-success="upFileSuccess"
                     :on-error="upFileError"
                     :limit="limit"
                     list-type="picture">
                     <el-button size="small" type="primary">上传附件</el-button>
                     <div slot="tip" class="el-upload__tip fns-error-msg">只能上传jpg、jpeg、gif、png文件，且不超过5M</div>
                   </el-upload>
                 </el-form-item>
               </el-col>
             </el-row>

          </el-form>
        </div>

        <!--// 底部-->
        <span slot="footer" class="dialog-footer">
          <el-button @click="updateMsg.code = -1">取 消</el-button>
          <el-button type="primary" @click="submitForm"> 提 交</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import { Message } from 'element-ui'
  import * as api from '@/api/order'
  import { mapState, mapActions } from 'vuex'

  export default {
    props: {
      updateMsg: {
        type: Object
      }
    },
    data() {
      return {
        limit: 1,
        fileList: [],
        detailLength: 50, // 详情长度
        length: {
          max10: 10,
          max14: 14,
          max18: 18,
          max20: 20,
          max50: 50,
          max60: 60,
          max100: 100
        },
        loading: false,
        disabled: '',
        modelTitle: '修改',
        dialogVisible: true,
        activeName: 'second',
        formModel: {
          id: '',
          salesBrand: [],
          saleArea: [],
          account: '',
          psd: '',
          confirmPsd: '',
          placeArea: [],
          enterpriseType: [],
          brokerName: '',
          saleMode: [],
          companyAddress: '',
          contactName: '',
          contactPhone: '',
          mailAddress: '',
          saleUserId: '',
          remarks: '',
          status: ''
        },
        form1: {
          brokerName: '', // 经纪人名称 ,
          brokerPhone: '', // 经纪人电话 ,
          commodityDepositAmount: '', // 定金金额 ,
          commodityGuaranteeAmount: '', // 保证金 ,
          orderCode: '', // 订单编号 ,
          orderId: '', // 订单id ,
          payInFull: '', // 是否全款,0否 1是 ,
          saleName: '', // 经手销售 ,
          totalOrderPrice: '',
          commodityDepositOrFullImageList: []
        },
        formData1: {
          confirmType: undefined,
          orderId: '',
          confirmDetails: ''
        },
        form2: {
          brokerName: '', // 经纪人名称 ,
          brokerPhone: '', // 经纪人电话 ,
          commodityDepositAmount: '', // 定金金额 ,
          commodityGuaranteeAmount: '', // 保证金 ,
          orderCode: '', // 订单编号 ,
          orderId: '', // 订单id ,
          payInFull: '', // 是否全款,0否 1是 ,
          saleName: '', // 经手销售 ,
          totalOrderPrice: '',
          commodityDepositOrFullImageList: []
        },
        formData2: {
          balancePaymentConfirm: undefined,
          orderId: '',
          detail: ''
        },
        form3: {
          brokerName: ''
        },
        formData3: {
          orderId: '',
          url: ''
        },
        rules: {
          confirmDetails: [
            { required: true, message: '必填项，不能为空', trigger: 'blur' }
          ],
          details: [
            { required: true, message: '必填项，不能为空', trigger: 'blur' }
          ],
          detail: [
            { required: true, message: '必填项，不能为空', trigger: 'blur' }
          ],
          confirmType: [
            { required: true, message: '必填项，不能为空', trigger: 'change' }
          ],
          balancePaymentConfirm: [
            { required: true, message: '必填项，不能为空', trigger: 'change' }
          ]
        },
        form4: {
          sales: 3
        }
      }
    },
    watch: {
      dialogVisible() {
        if (this.$refs.formModel) {
          this.$refs.formModel.clearValidate()
        }
      }
    },
    components: {
    },
    created() {
      this.getlist()
    },
    computed: {
      ...mapState({
        imgUrl: state => state.userInfo.url,
        tokenImg: state => state.user.token
      })
    },
    methods: {
      ...mapActions({
        loginOut: 'FedLogOut'
      }),
      getlist() {
        var orderId = { orderId: +this.updateMsg.id }
        if (+this.updateMsg.code === 4 || +this.updateMsg.code === 11) {
          // 获取--定金/全款待审核
          api.auditModify(orderId).then((res) => {
            if (+res.code === 0) {
              this.form1 = res.data
            }
          })
        } else if (+this.updateMsg.code === 7) {
          // 获取--尾款待审核信息
          api.balanceModify(orderId).then((res) => {
            if (+res.code === 0) {
              this.form2 = res.data
            }
          })
        } else if (+this.updateMsg.code === 21 && +this.updateMsg.saleType === 1) {
          // 获取--归还保证金
          api.marginModify(orderId).then((res) => {
            if (+res.code === 0) {
              this.form3 = res.data
            }
          })
        }
      },
      // 保存--定金/全款待审核
      auditSave() {
        this.formData1.orderId = +this.updateMsg.id
        this.$refs['formData1'].validate((valid) => {
          if (valid) {
            api.auditSave(this.formData1).then((res) => {
              if (+res.code === 0) {
                this.updateMsg.code = false
                this.$emit('queryList')
              }
            }).catch(err => {
              if (+err.code === 1020) {
                Message({
                  message: '该订单状态已改变，请关闭对话框并刷新订单列表',
                  type: 'warning',
                  duration: 2000
                })
              }
            })
          }
        })
      },
      // 保存--尾款待审核信息
      balanceSave() {
        this.formData2.orderId = +this.updateMsg.id
        this.$refs['formData2'].validate((valid) => {
          if (valid) {
            api.balanceSave(this.formData2).then((res) => {
              if (+res.code === 0) {
                this.updateMsg.code = false
                this.$emit('queryList')
              }
            })
          }
        })
      },
      // 保存--归还保证金
      marginSave() {
        if (this.formData3.url === '') {
          Message({
            message: '请上传图片',
            type: 'warning',
            showClose: true
          })
          return
        }
        this.formData3.orderId = +this.updateMsg.id
        api.marginSave(this.formData3).then((res) => {
          if (+res.code === 0) {
            this.updateMsg.code = false
            this.$emit('queryList')
          }
        }).catch(err => {
          if (+err.code === 1020) {
            Message({
              message: '该订单状态已改变，请关闭对话框并刷新订单列表',
              type: 'warning',
              duration: 2000
            })
          }
        })
      },
      submitForm() {
        if (+this.updateMsg.code === 4 || +this.updateMsg.code === 11) {
          this.auditSave()
        } else if (+this.updateMsg.code === 7) {
          this.balanceSave()
        } else if (+this.updateMsg.code === 21 && +this.updateMsg.saleType === 1) {
          this.marginSave()
        }
      },
      handleClose(done) {
        this.updateMsg.code = -1
      },
      // 上传图片
      handleRemove(file, fileList) {
        console.log(file, fileList)
      },
      handlePreview(file) {
        console.log(file)
      },
      upFileSuccess(res, file, fileList) {
        if (+res.code === 0) {
          Message({
            message: `图片上传成功`,
            type: 'success',
            showClose: true
          })
          this.formData3.url = res.data
        } else {
          if (+res.code === 101) {
            this.loginOut()
            this.$router.push({ path: '../login' })
          } else {
            Message({
              message: '图片上传失败,请删除图片，重新上传',
              type: 'error',
              showClose: true
            })
          }
        }
      },
      upFileError(err, file, fileList) {
        if (err) {
          Message({
            message: '图片上传失败',
            type: 'error',
            showClose: true
          })
        }
      },
      beforeUpload(file) {
        if (!/(jpg|png|jpeg|gif)$/.test(file.name)) {
          this.$message({
            message: '图片格式不正确',
            type: 'warning',
            showClose: true
          })
          return false
        }
        if (file.size / 1024 > 5120) {
          this.$message({
            message: '文件超过5M,请调整后重新上传',
            type: 'warning',
            showClose: true
          })
          return false
        }
      }
    }
  }
</script>
<style lang="scss">
  .cashOrder {
    position: relative;
    padding: 20px;
    .el-upload-list--picture .el-upload-list__item-name { // img name  隐藏
      display: none;
    }
    .itemNum {
      .el-form-item__label {
        line-height: 18px;
      }
    }
    .el-dialog {
      .itemVIN {
        .el-form-item__content {
          margin-top: 8px;
        }
        .el-col-10 {
          line-height: 20px;
        }
      }
    }
    .el-table {
      .el-table__body-wrapper {
        height: 100%;
        overflow-x: inherit;
      }
    }
    .el-tabs__nav {
      margin-left: 30px;
    }
    .modalCheckBox {
      .el-checkbox-group {
        line-height: 18px;
        margin-left: 20px;
        margin-top: -5px;
        .el-checkbox {
          .el-checkbox__label {
            font-size: 12px;
            color: #666;
          }
        }
      }
      .el-checkbox {
        margin-right: 20px;
      }
      .el-checkbox + .el-checkbox {
        margin-left: 0;
      }
    }
  }
</style>

